<template>
	<div class="form-rules-one-container">
		<el-row class="mb20">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="order-info">
				<div style="display: flex;justify-content: space-between;">
				<el-radio-group v-model="state.radio"  @change="onRadioChange">
					<el-radio-button label="-1">全部</el-radio-button>
					<el-radio-button label="1">已服务</el-radio-button>
					<el-radio-button label="2">已撤销</el-radio-button>
				</el-radio-group>
				<div style="display: flex;">
					<el-input  placeholder="请输入关键字搜索" style="max-width: 380px" class="ml20"> </el-input>
					<el-button  type="primary" class="ml20">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
				</el-button>
				</div>
				
				</div>
			</el-col>
		</el-row>
		
		<section>
            <el-row class="pl10 pr10" justify="center">
                <el-col class="flex-jCenter" :span="8">商品/规格/属性/数量</el-col>
					<el-col class="flex-jCenter" :span="2">属性</el-col>
					<el-col class="flex-jCenter" :span="2">服务类型</el-col>
					<el-col class="flex-jCenter" :span="2">消耗业绩</el-col>
					<el-col class="flex-jCenter" :span="2">评价状态</el-col>
					<el-col class="flex-jCenter" :span="2">订单状态</el-col>
					<el-col class="flex-jCenter" :span="2">会员/手机号</el-col>
					<el-col class="flex-jCenter" :span="2">服务员工/门店</el-col>
					<el-col class="flex-jCenter" :span="2">操作</el-col>
            </el-row>
            <template v-if="state.tableData.length > 0">
                <section v-for="(item, index) of state.tableData" :key="item.id" class="orderBox mt10">
					<el-row class="orderItemTop pl10 pr10 pt5 pb5">
						<el-col :span="18">
							<p>
								<span class="mr10">订单号：{{ item.snkey }}</span>
								<span class="mr10">销售时间：{{ item.alterTime }}</span>
								<span class="mr10">操作时间：{{ item.createdTime }}</span>
								<span class="mr10">订单来源：{{ item.source }}</span>
							</p>
						</el-col>
						<el-col :span="6" class="flex" style="justify-content:flex-end;">
							<el-button  v-if="item.status != '已撤销'" text type="primary"
								@click="onRevokeOrder(item.id, index)">撤销订单</el-button>
							<el-button  text type="primary" @click="addNote(item.snkey)">备注</el-button>
						</el-col>
					</el-row>
					<el-row class="goodsItem">
						<el-col :span="8">
							<div class="goodBox" style="display: flex;justify-content: space-between;" v-for="(i) of item.itemsList" :key="i.id">
								<div style="display: flex;align-items: center;">
									<div style="width:64px; height: 64px;">
										<el-image style="width:64px; height: 64px;border-radius: 5px;" :src="i.cover" fit="cover" />
									</div>
									<div class="ml5">
										<p class="px2 goodMsg">{{ i.title }}</p>
										<p class="px2 goodMsg">{{ i.attrValues }}</p>
									</div>
								</div>
								<div class="mr15">
									x{{ i.number }}
								</div>
							</div>
						</el-col>
						<el-col :span="2">
							<div class="goodBox" style="justify-content: center;" v-for="(i) of item.itemsList" :key="i.id">
								<div>
									<span>{{ i.cardType }}</span>
								</div>
							</div>
						</el-col>
						<el-col :span="2">
							<div class="goodBox" style="justify-content: center;" v-for="(i) of item.itemsList" :key="i.id">
								<div>
									<span>{{ i.change ? '换卡服务' : '余卡服务' }}</span>
								</div>
							</div>
						</el-col>
						<el-col :span="2">
							<div class="goodBox" style="justify-content: center;" v-for="(i) of item.itemsList" :key="i.id">
								<div>
									<span>￥{{ i.money }}元</span>
								</div>
							</div>
						</el-col>
						<el-col :span="2">
							<div class="goodBox" style="justify-content: center;" v-for="(i) of item.itemsList" :key="i.id">
								<div>
									<span>{{ i.isEvaluation || '未评价' }}</span>
								</div>
							</div>
						</el-col>
						<el-col :span="2">
							<div>
								<span style="font-weight: bold;">{{ item.status }}</span>
							</div>
						</el-col>
						<el-col :span="2">
							<div style="text-align: center"> {{ item.realName }}</div>
							<div style="text-align:center">
								{{ item.phone }}
							</div>
							
						</el-col>
						<el-col :span="2">
							<div style="text-align: center"> {{ rebateListFilters(item.itemsList) }}</div>
							<div style="text-align:center;padding: 5px 10px;">
								{{ item.node }}
							</div>
						</el-col>
						<el-col :span="2">
							<div>
								<el-button v-if="item.status == '待支付'"  text type="primary"
									@click="changePrice(item)">改价</el-button>
								<el-button v-if="item.status == '待发货'"  text type="primary"
									@click="deliverFun(item)">发货</el-button>
								<el-button  text type="primary"
									@click="onOpenEditRole(item)">详情</el-button>
							</div>
						</el-col>
					</el-row>
					<template v-if="item.noteList?.length">
						<el-row class="orderItemBottom pl10 pr10 pt5 pb5"
							v-if="item.noteList && item.noteList.length >= 0">
							<el-col :span="18">
								{{ item.noteList[0].note }}
							</el-col>
							<el-col :span="6" class="flex" style="justify-content:flex-end;">
								<el-button  text type="primary">查看更多</el-button>
							</el-col>
						</el-row>
					</template>
				</section>
            </template>
            <section v-else>
                <el-empty :image-size="200" />
            </section>
        </section>
		<div class="table-footer mt15" style="display: flex; justify-content: flex-end;">
			<el-pagination v-model:current-page="state.param.pageNum" v-model:page-size="state.param.pageSize"
				:pager-count="5" :page-sizes="[10, 20, 30]" :total="state.total"
				layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange">
			</el-pagination>
		</div>
		<fuwudingdanDialog :id="state.itemID" ref="fuwudingdanDialogRef" />
	</div>
</template>

<script setup lang="ts" name="pagesFormRulesOne">
import { reactive, onMounted, defineAsyncComponent, ref } from 'vue';
import type { saleOrderListData, } from "/@/types/order";
import { orderQuery } from "/@/api/order";


const fuwudingdanDialog = defineAsyncComponent(() => import('/@/views/member/statistics/components/fuwudingdanDialog.vue'));

const fuwudingdanDialogRef = ref();
// 定义父组件传过来的值
const props = defineProps({
	data: {
		type: Number,
		default: () => { },
	},
});

// 定义变量内容
const state = reactive({
	loading: false,
	param: {
		type: 0,
		pageNum: 1,
		pageSize: 10,
	},
	total: 0,
	tableData: [] as Array<saleOrderListData>,
	itemID:0
});

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;
	const { results } = await orderQuery(state.param);
	state.loading = false;
	state.tableData = results.records.slice(0,1);
	state.total = results.total;
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 赋值回显
const initForm = () => {
	state.param.type = props.data;
	getOrderList();
};

// 页面加载时
onMounted(() => {
	initForm();
});

// 订单详情
const onOpenEditRole = (item?: any) => {
    state.itemID = item.id
	fuwudingdanDialogRef.value.openDialog();
};

// 销售员工过滤器
const rebateListFilters = (item: any) => {
	let arr = item[0].rebateList
	if (Array.isArray(arr)) {
		let newArr = arr.map((obj: { id: any, employee: any, money: any; }) => obj.employee);
		let uniqueArr = [...new Set(newArr)];
		return uniqueArr.join('、')
	} else {
		return '--'
	}
}
</script>
<style scoped lang="scss">
@import '../../../../theme/mixins/index.scss';



.orderBox {
	border: 1px solid var(--el-card-border-color);

	.orderItemTop {
		background: var(--next-bg-color);
		border-bottom: 1px solid var(--el-card-border-color);

		p {
			@include text-no-wrap;
		}
	}

	.goodsItem {
		.goodBox {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 2px 5px;
			border-bottom: 1px solid var(--el-card-border-color);
			box-sizing: border-box;
			height: 76px;
			width: 100%;
			overflow: hidden;
			.goodMsg {
				@include text-ellipsis(2);
			}
			p {
				@include text-ellipsis(1);
			}
		}

		.goodBox:last-child {
			border-bottom: none;
		}

		.el-col {
			display: flex;
			align-items: start;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-right: 1px solid var(--el-card-border-color);
			min-height: 74px;
		}

		.el-col:last-child {
			border-right: none;
		}
	}

	.orderItemBottom {
		background: var(--next-bg-color);
		color: var(--el-table-text-color);
		border-top: 1px solid var(--el-card-border-color);

	}
}</style>
